<template>
	<view class="content">
		<view class="section">
			<view class="section-body">
				<view class="section-0">
					<view class="wrapper">
						<view class="label">时间</view>
						<view class="value">
							<view class="date" @click="show = true">
								<view class="input-body">{{form.sub_time}}</view>
								<view class="iconfont icon-rili"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="section-0">
					<view class="wrapper">
						<view class="label">责任单位</view>
						<view class="value">
							<view class="date" @click="showTypeProblems = true">
								<view class="input-body">{{form.Responsible}}</view>
								<view class="iconfont icon-xiala"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="section-0">
					<view class="wrapper">
						<view class="label">类型</view>
						<view class="value">
							<view class="date" @click="showType = true">
								<view class="input-body">{{form.type}}</view>
								<view class="iconfont icon-xiala"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="section-0">
					<view class="wrapper">
						<view class="label">阶段</view>
						<view class="value">
							<view class="date" @click="showStage = true">
								<view class="input-body">{{form.Stage}}</view>
								<view class="iconfont icon-xiala"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="section-0">
					<view class="wrapper wrapper-title">
						<view class="title">问题描述
						</view>
						<view class="value l-value">
							<view class="textarea">
								<u--textarea :maxlength="-1" placeholderClass="textarea-placeholder"
									class="textarea-body" placeholder="输入问题描述..." v-model="form.content" border='null'>
								</u--textarea>
							</view>
						</view>
					</view>
				</view>

				<view class="section-0">
					<view class="wrapper">
						<view class="label">照片</view>
						<view class="value">
							<view class="upload-wrap">
								<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead"
									@delete="deletePic" multiple :maxCount="1">
								</u-upload>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="preservation">
			<u-button class="preservabtn" type="primary" text="保存" @click="submit"></u-button>
		</view>
		<u-datetime-picker @cancel="show = false" @confirm='getTime' :show="show" v-model="valTime" mode="date">
		</u-datetime-picker>
		<u-picker :show="showTypeProblems" keyName="dw_name" :columns="typeListProblems" closeOnClickOverlay
			@cancel="showTypeProblems = false" @close="showTypeProblems = false" @confirm="_setCurType"></u-picker>
		<u-picker :show="showType" keyName="name" :columns="typeList" closeOnClickOverlay @cancel="showType = false"
			@close="showType = false" @confirm="CurType"></u-picker>
		<u-picker :show="showStage" keyName="name" :columns="StageList" closeOnClickOverlay @cancel="showStage = false"
			@close="showStage = false" @confirm="CurStage"></u-picker>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		PeojectDesignProblem,
		PeojectDesignProblemAdd,
		PeojectDesignProblemDetail,
		PeojectDesignProblemUpdate,
	} from '@/api/zhengchu.js';
	import {
		uploadUrl
	} from '@/baseUrl.js';
	export default {
		data() {
			return {
				showStage: false,
				showTypeProblems: false,
				showType: false,
				show: false,
				fileList: [],
				valTime: Number(new Date()),
				id: 0,
				form: {
					company_name: '',
					duty_user_id: '',
					duty_user_name: '',
					sub_time: '',
					Responsible: '',
					ResId: '',
					type: '',
					Stage: '',
					content: '',
					file_id: ''
				},
				typeListProblems: [],
				StageList: [
					[{
							name: '可研'
						},
						{
							name: '初设'
						},
						{
							name: '施工图'
						},
						{
							name: '竣工图'
						},
						{
							name: '现场工代'
						}
					]
				],
				typeList: [
					[{
							name: '变电'
						},
						{
							name: '线路'
						}
					],
				]
			}
		},
		computed: {
			...mapGetters({
				curProject: "system/getCurProject",
			}),
		},
		methods: {
			PeojectD() {
				this.typeListProblems = []
				PeojectDesignProblem({
					project_id: '63ffca27-3fb9-4070-a546-59f9b03a6361',
					type: '设计单位'
				}).then(res => {
					this.typeListProblems.push(res.data.data)
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1);
				this.form.file_id = '';
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.form.file_id = result.data.file_id
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id,
						file_path: result.data.file_path,
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
				return Y + M + D
			},
			// 保存日期
			getTime(e) {
				console.log(e)
				const timeStamp = e.value;
				this.form.sub_time = this.formatDate(timeStamp);
				this.show = false
			},
			// 保存责任单位
			_setCurType(e) {
				this.showTypeProblems = false
				this.form.Responsible = e.value[0].dw_name
				this.form.ResId = e.value[0].id
			},
			// 保存类型
			CurType(e) {
				this.showType = false
				this.form.type = e.value[0].name
			},
			// 保存阶段
			CurStage(e) {
				this.showStage = false
				this.form.Stage = e.value[0].name
			},
			//提交
			async submit() { //添加按钮  点击确定
				let obj = {}
				obj.project_id = this.curProject.id
				obj.type = this.form.type
				obj.period = this.form.Stage
				obj.company_name = this.form.Responsible
				obj.company_id = this.form.ResId
				obj.describe = this.form.content
				obj.design_time = this.form.sub_time
				obj.file_id = this.form.file_id
				if (this.id) {
					obj.id = this.id
					PeojectDesignProblemUpdate({
						...obj
					}).then(res => {
						console.log(res.data);
						if (res.data.code == 1) {
							uni.showToast({
								title: '修改成功',
								duration: 1000,
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)

						} else {
							uni.showToast({
								title: '修改失败',
								duration: 1000,
								icon: 'error'
							});
						}
					})
				} else {
					PeojectDesignProblemAdd({
						...obj
					}).then(res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: '添加成功',
								duration: 1000,
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)

						} else {
							uni.showToast({
								title: '添加失败',
								duration: 1000,
								icon: 'error'
							});
						}
					})
				}
			}
		},
		onLoad(data) {
			this.PeojectD()
			//编辑过来使用添加的页面修改标题
			if (data.id) {
				uni.setNavigationBarTitle({
					title: '问题修改'
				})
			}
			this.id = data.id
			if (data.id) {
				PeojectDesignProblemDetail({
					id: this.id
				}).then(res => {
					this.form.type = res.data.data.type
					this.form.Stage = res.data.data.period
					this.form.Responsible = res.data.data.company_name
					this.form.ResId = res.data.data.company_id
					this.form.content = res.data.data.describe
					this.form.sub_time = res.data.data.design_time ? res.data.data.design_time.substring(0, 10) :
						'-'
					this.form.file_id = res.data.data.file_id
					if (res.data.data.file_path) {
						this.fileList = [{
							url: res.data.data.file_path
						}]
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		background: #2e5efe;

		.section-body {
			padding-top: 40rpx;
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
		}

		.section-0 {
			margin-bottom: 24rpx;
			background-color: #fff;
		}

		.wrapper {
			width: 670rpx;
			margin-left: 40rpx;
			border-radius: 35rpx;
			background-size: cover;
			background-repeat: no-repeat;
			overflow: hidden;
			box-sizing: border-box;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			padding: 28rpx 40rpx;

			.label {
				width: 135rpx;
				float: left;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				height: 48rpx;
				line-height: 48rpx;
				letter-spacing: 0px;
				color: #46464a;
			}

			.value {
				float: left;
				width: 445rpx;

				.date {
					width: 100%;
					height: 52rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					line-height: 48rpx;
					position: relative;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.7);
					box-sizing: border-box;
					text-align: center;
					color: #0535d6;
					padding-right: 50rpx;

					.input-body {
						width: 380rpx;
						height: 52rpx;
						overflow: hidden;
					}

					.iconfont {
						position: absolute;
						right: 25rpx;
						top: 0rpx;
						font-size: 30rpx;
						color: #0535d6;
					}
				}

				.textarea {
					width: 100%;
					height: 200rpx;
					line-height: 30rpx;

					.textarea-body {
						box-sizing: border-box;
						width: 100%;
						height: 200rpx;
						border: none;
						padding: 18rpx 0rpx !important;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;

						/deep/ .u-textarea__field {
							height: auto !important;
							font-size: 25rpx;
						}
					}

					/deep/ .u-textarea--disabled {
						background-color: #fff;
					}

					.textarea-placeholder {
						font-size: 25rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 50rpx;
						letter-spacing: 3rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.l-value {
				width: 100%;
			}
		}
	}

	.preservation {
		width: 100%;
		height: 115rpx;
		position: fixed;
		bottom: 0rpx;
		right: 0;
		padding-top: 21rpx;
		box-shadow: 0 0 10rpx 10rpx rgba(#bcbcb5, 0.17);

		.preservabtn {
			width: 75%;
			margin: auto;
		}
	}
</style>
